<template>
  <div class="auton">
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')">
          首页
        </a-breadcrumb-item>
        <a-breadcrumb-item href="" @click.native="$router.push('/service')"
          >康复服务</a-breadcrumb-item
        >
        <a-breadcrumb-item style="color: #ffbe37">康复科普</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="top cOsingleCF">
      <!-- <div class="cOicon-id" @click="changeSort(1)">
        <p>最新排序</p>
        <img
          v-if="bastNew == 2"
          src="@/assets/image/employment/nosort.png"
          alt=""
        />
        <img v-else src="@/assets/image/employment/topsort.png" alt="" />
      </div>
      <div class="cOicon-id" style="margin-left: 40px" @click="changeSort(2)">
        <p>热门排序</p>
        <img
          v-if="bastNew == 1"
          src="@/assets/image/employment/nosort.png"
          alt=""
        />
        <img v-else src="@/assets/image/employment/topsort.png" alt="" />
      </div> -->
      <!-- <ul></ul> -->
      <div class="dlex2-div" style="width: 335px">
        <a-input
          v-model="msgons"
          placeholder="请输入关键字"
          class="searchInput"
        />
        <div class="searchIcon" @click="search()">
          <img style="width: 15px" src="@/assets/image/icon1.png" alt="" />
          <span>搜索</span>
        </div>
      </div>
    </div>
    <div class="center coRsingleCF">
      <div
        class="listDiv dlex3-div"
        @click="goDetail(item.sprNo, '科普')"
        v-for="(item, i) in SpreadList"
        :key="i"
      >
        <div class="lleft" v-if="item.cover">
          <img
            :src="imageWebUrl + item.cover"
            @error="$event.target.src = GLOBAL.defaultCover"
            alt=""
          />
        </div>
        <div class="lright">
          <span class="ltxt1 multiline">{{ item.title }}</span>
          <!-- <div class="dlex2-div lsdiv">
            <span class="timeTxt2">发布：{{ item.publishDate }} </span>
            <span class="timeTxt2">阅读量：{{ item.browseNum }} </span>
          </div> -->
          <div class="titleTxt6 multiline">
            <span>{{ item.abstracts }}</span>
          </div>

          <div class="dlex2-div lsdiv">
            <span class="timeTxt2">来源：{{ item.source }} </span>
          </div>
        </div>
      </div>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 50px auto"
        v-if="NoData"
      />
    </div>
    <div class="bottom">
      <div class="cnBottom" v-if="SpreadList.length > 9">
        <div style="margin: 0 auto; width: 230px">
          <a-button @click="more()" v-show="btnState == 1" class="sobtn"
            >点击加载更多</a-button
          >
          <a-button v-show="btnState == 2" class="sobtn" :loading="true"
            >正在加载中</a-button
          >
          <span class="timeTxt1" style="text-align: center" v-if="btnState == 3"
            >没有更多了</span
          >
        </div>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>


<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      btnState: 1,
      msgons: "",
      pageIndex: 1,
      SpreadList: [],
      bastNew: 1,
      loadingFlag: true,
      onLoading: false,
      NoData: false,
    };
  },
  methods: {
    // 跳转详情页
    goDetail(id, type) {
      this.$router.push("/details/details?id=" + id + "&from=4&type=" + type);
    },
    // 选中样式函数
    changeSort(e) {
      this.bastNew = e;
      this.search();
      // console.log(this.bastNew);
    },
    // 输入框的回调
    inputsel(e) {
      if (e.data == null) {
        this.pageIndex = 1;
        this.SpreadList = [];
        this.getSpreadList(1);
      }
    },
    // 递归
    // digui(e){
    //   for (let index = 0; index < e.length; index++)0{
    //     const arrement = array[index];
    //     digui(arrement);
    //     return arrement;
    //   }
    // },
    search() {
      this.pageIndex = 1;
      // 检测定时器
      if (this.timer) {
        // 如果有定时器,则清除
        clearTimeout(this.timer);
        this.timer = null;
      }
      // 设置定时器和事件
      this.timer = setTimeout(() => {
        this.SpreadList = [];
        this.getSpreadList(1);
      }, 500);
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.getSpreadList(this.pageIndex);
    },
    // 获取康复科普列表
    getSpreadList(e) {
      this.onLoading = true;
      let ber = [];
      this.$ajax({
        url: "/news/healthspread/list?pageSize=" + 10 + "&pageIndex=" + e,
        method: "post",
        dataType: "JSON",
        params: {
          title: this.msgons,
          orderType: this.bastNew,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          ber = res.data.list;
          for (var i in ber) {
            this.SpreadList.push(ber[i]);
          }
          // 判断查询数据的长度
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.NoData = true;
        }
      });
    },
  },
  created() {
    this.getSpreadList(1);
  },
};
</script>

<style lang="less" scoped>
.top {
  background-color: #ffffff;
  padding: 12px 24px;
  margin: 0 auto;
  width: 1200px;
  display: flex;
  align-items: center;
  ul {
    display: block;
    flex: 1;
    li {
      width: 64px;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      color: #333333;
    }
  }
}
.center {
  .listDiv {
    margin-top: 20px;
    width: 590px;
    margin-left: 20px;
    background: #ffffff;
    padding: 24px 25px;
    cursor: pointer;
    float: left;

    .lleft {
      margin-right: 24px;
      width: 196px;
      height: 120px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .lright {
      flex: 1;
      overflow: hidden;
    }
    .ltxt1 {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
      -webkit-line-clamp: 2;
    }
    .lsdiv {
      margin-top: 16px;
      margin-bottom: 8px;
    }
    .titleTxt7 {
      margin: 16px 0;
      -webkit-line-clamp: 3;
      line-height: 28px;
    }
  }
  .listDiv:nth-child(2n-1) {
    margin-left: 0px;
  }
}
.cOicon-id {
  cursor: pointer;
  img {
    margin-left: 8px;
    width: 6px;
  }
}
.searchIcon {
  padding: 12px;
  height: auto;
  width: auto;
}
.searchInput {
  width: 250px;
  height: 38px !important;
}
.titleTxt6 {
  margin-top: 16px;
  -webkit-line-clamp: 2;
  span {
    font-size: 16px !important;
    font-family: PingFang SC !important;
    line-height: 24px !important;
    color: #666666;
  }
  p {
    font-size: 16px !important;
    font-family: PingFang SC !important;
    line-height: 24px !important;
    color: #666666;
  }
}
</style>
